<template>
  <div class="home-middle1">
    <div class="home-middle1-content">
      <div class="home-middle1-wrap">
        <div class="index__hd">
          <h2 class="index__tit"><i class="icon_txt"></i></h2>
          <router-link to="/toplist" class="all-play">更多 ></router-link>
        </div>
      </div>
      <ul class="toplist__list">
        <li
          class="toplist__item mod_cover"
          :class="`item${index}`"
          v-for="(song, index) in homeStore.toplist"
          :key="song.id"
        >
          <div class="toplist__box">
            <div class="toplist__bg"></div>
            <i class="mod_cover__icon_play"></i><i class="toplist__line"></i>
            <h3 class="toplist__head">
              <a class="toplist__tit" href="/n/ryqq/toplist/26">{{
                song.title.slice(0, -1)
              }}</a>
            </h3>
            <ul class="toplist__songlist">
              <li class="toplist__song" v-for="s in song.song">
                <div class="toplist__number">1</div>
                <div class="toplist__songname">
                  <router-link :to="`/songDetail/${s.songId}`">{{
                    s.title
                  }}</router-link>
                </div>
                <div class="toplist__artist">
                  <router-link :to="`/singerdetail/${s.singerMid}`">{{
                    s.singerName
                  }}</router-link>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'RankingList',
}
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/homeStore'
import type { NewAlbumType } from '@/stores/homeStoreType'
import { getHomeToplistApi } from '@/api/home/getRecommendApi'

const homeStore = useHomeStore() //获取数据

onMounted(async () => {
  // const res = await getHomeToplistApi()
  // console.log(res)
})
const forCarouselData = ref<NewAlbumType[][]>([])
</script>

<style scoped>
.toplist__list {
  width: 1220px;
  height: 500px;
  box-sizing: border-box;
  position: relative;
  color: #fff;
}
a {
  color: #fff;
}
.toplist__list .toplist__item {
  float: left;
  height: 500px;
}
.toplist__item .toplist__box {
  position: relative;
  width: 224px;
  height: 500px;
  margin-right: 20px;
  overflow: hidden;
}
.toplist__item .toplist__box:hover .toplist__bg {
  transform: scale(1.1);
  position: absolute;
}
.toplist__box .toplist__bg {
  width: 100%;
  height: 100%;
  background-image: url('./imgs/bg_index_top.5314c494.webp');
  transition: 0.5s;
}
.item1 .toplist__box .toplist__bg {
  background-position-x: -224px;
}
.item2 .toplist__box .toplist__bg {
  background-position-x: -448px;
}
.item3 .toplist__box .toplist__bg {
  background-position-x: -672px;
}
.item4 .toplist__box .toplist__bg {
  background-position-x: -896px;
}
.toplist__line {
  position: absolute;
  left: 50%;
  top: 148px;
  margin-left: -18px;
  width: 36px;
  height: 2px;
  background: #fff;
}
.toplist__item .toplist__box:hover .toplist__line {
  opacity: 0;
}
.toplist__head {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  text-align: center;
  font-size: 26px;
  font-weight: normal;
}
.toplist__head::before {
  content: '';
  display: block;
  width: 66px;
  height: 22px;
  margin: 0 auto 9px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
  background-position: 0 -300px;
}
.toplist__songlist a {
  font-size: 14px;
}
.toplist__songlist {
  position: absolute;
  top: 188px;
  left: 30px;
  right: 30px;
  white-space: nowrap;
}
.toplist__song {
  position: relative;
  padding-left: 15px;
  margin-bottom: 27px;
}
.toplist__song .toplist__number {
  position: absolute;
  top: 0;
  left: 0;
}
.toplist__artist,
.toplist__songname {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toplist__item .mod_cover__icon_play {
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: 50%;
}
.toplist__item .mod_cover__icon_play {
  top: 114px;
  margin-top: 0;
  margin-bottom: 0;
}
.mod_cover__icon_play {
  position: absolute;
  left: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  opacity: 0;
  transition: 0.5s;
  transform: scale(0.9);
  background-image: url('./imgs/cover_play.56974e6f.png');
}
.toplist__item .toplist__box:hover .mod_cover__icon_play {
  opacity: 1;
  transform: scale(1);
}
.all-play {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #000;
}
.all-play:hover {
  color: #31c27c;
}

.home-middle1 {
  background-image: linear-gradient(#f2f2f2, #fff);
  min-width: 1200px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.home-middle1-content {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 75px;
}
.home-middle1-wrap {
  padding: 50px 0 24px 0;
  position: relative;
}
.index__hd {
  position: relative;
}
.index__tit {
  display: block;
  margin: 0 auto;
  width: 196px;
  height: 40px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
  background-position-y: -200px;
}
.mod_index_tab {
  position: relative;
  text-align: center;
  height: 50px;
}
.mod_index_tab a {
  margin: 0 20px;
  font-size: 15px;
  cursor: pointer;
}
.mod_index_tab a:hover {
  color: #31c27c;
}
</style>
